<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
    <!-- meta tags start -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Keywords" content="blinds, premium, mobile, template, HTML, Css"/>
    <meta name="Description" content="Premium mobile HTML/CSS template."/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <script src="${ctx}/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="${ctx}/js/bootstrap.min.js"></script>
    <link href="${ctx}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet">
    <script src="${ctx}/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${ctx}/simplelightbox/lightbox.css" type="text/css" media="all">
    <script src="${ctx}/simplelightbox/lightbox.js"></script>
    <script src="${ctx}/js/commons.js"></script>

    <script src="${ctx}/dateTimeWidget/cc_mobiscroll_prepare.js" type="text/javascript"/>
    <script src="${ctx}/dateTimeWidget/js/jquery.1.7.2.min.js"></script>
    <script src="${ctx}/dateTimeWidget/js/mobiscroll_002.js" type="text/javascript"></script>
    <script src="${ctx}/dateTimeWidget/js/mobiscroll_004.js" type="text/javascript"></script>
    <link href="${ctx}/dateTimeWidget/css/mobiscroll_002.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/dateTimeWidget/css/mobiscroll.css" rel="stylesheet" type="text/css">
    <script src="${ctx}/dateTimeWidget/js/mobiscroll.js" type="text/javascript"></script>
    <script src="${ctx}/dateTimeWidget/js/mobiscroll_003.js" type="text/javascript"></script>
    <script src="${ctx}/dateTimeWidget/js/mobiscroll_005.js" type="text/javascript"></script>
    <link href="${ctx}/dateTimeWidget/css/mobiscroll_003.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/css/stylemobile.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="${ctx}/css/css.css" rel="stylesheet" type="text/css" media="all" />

    <title>预约项目</title>
    <style>
        /*时间空间样式 ggzy 20180717*/
        .bt_input_time_zuo {
            width: 84%;
            border: 1px solid #e3e3e3;
            border-radius: 5px;
            padding: 5px 0;
            padding-right: 10px;
            }
        .textA ul li span{
            width: 28%;
            display: inline-block;
            text-align: right;
            float: left;
            margin-top: 2px
        }
        .list ul li {
            text-align: left;
        }
    </style>

    <script type="text/javascript">
        $(function(){
            //获得Cookie中的openId
            var openId = getCookie("openId");
            $("#openId").val(openId);
            //加载项目列表
            getThirdLevelList();
        });

        function getThirdLevelList(idList) {
            $("#projectName").empty();
            $("#projectName").append("<option value=''>请选择</option>");
            $("#appointmentime").val("");
            $("#remarks").val("");

            $.ajax({
                url: "${ctx}/project/getProjectList",
                type: "GET",
                dataType : "json",
                success: function(data) {
                    var jsonObj = eval(data);
                    var sysEnjoyes = jsonObj.data;
                    $.each(sysEnjoyes, function (i, item) {
                        jQuery("#projectName").append("<option value="+ item.id+">"+ item.projectName+"</option>");
                    });
                },
                error: function(text) {}
            });
        }

        function selectOnchage() {
            var selectedVal = $("#projectName option:selected") .val();
            $("#applytype").val(selectedVal);
        }

        function saveBookingProject() {
            var applytype = $("#applytype") .val();
            var projectNameSel = $("#projectName").val();
            var appointmentime = $("#appointmentime") .val();
            if (projectNameSel == '' || projectNameSel == null){
                alert("请选择预约项目！");
                return;
            }else if (appointmentime == '' || appointmentime == null){
                alert("请选择预约时间！");
                return;
            }else {
                var data = {
                    "projectId": $("#projectName").val(),
                    "appointTime":$("#appointmentime").val(),
                    "remark":$("#remarks").val(),
                    "openId":$("#openId").val()
                };
                console.log(data)
                $.ajax({
                    url: "${ctx}/appoint/save",
                    type: "POST",
                    data: JSON.stringify(data),
                    dataType : "json",
                    contentType:"application/json",
                    success: function(data) {
                        console.log(data)
                        var res = eval(data);
                        if (res.code == 200){
                            window.location.href='${ctx}/appoint/myAppoint';
                            /*alert("预约成功！");*/
                        }else{
                            alert("预约失败！");
                        }
                    },
                    error: function(text) {}
                });
            }
        }

        function goBackSecond() {
            window.location.href='${ctx}/appoint/myAppoint';
        }
    </script>
</head>
<body>
<div id="js_article" class="rich_media">
    <div class="rich_media_content" id="js_content">
        <div class="websiteWrapper">
            <div class="headerOuterWrapper">
                <div class="headerWrapper">
                    <span style="color: #fff;">预约项目</span>
                </div>
            </div>
            <div  class="tab-pane" id="Section2">
            <input type="hidden" id="openId" name="openid">
            <div class="list textA">
                <ul>
                    <li>
                        <span>项目名称：</span>
                        <select id="projectName" name="projectName" style="height: 5%;width: 50%;font-size:15px" onchange="selectOnchage();" required>
                            <option value=''>请选择</option>
                        </select>
                    </li>
                    <li><span>预约时间：</span>
                        <input id="appointmentime" name="appointmentime" style="width: 50%;" class="bt_input_time_zuo cc_dateTime"
                               value="${map.ownerTime}" readonly="readonly">
                    </li>
                    <li>
                        <span style="margin-top: 20px;">备注信息：</span>
                        <textarea id="remarks" name="remarks" style="width: 50%;font-size:15px;line-height: 23px;margin-top: 3%;" rows="2" maxlength="100" placeholder="请输入备注信息,字数在100字以内！"></textarea>
                    </li>
                </ul>
            </div>
            <div class="btn">
                <input type="button" class="reg" value="确定" onclick="saveBookingProject()">

            </div>
        </div>
            <c:if test="${not empty isItVIP}">
                不是尊享会员
            </c:if>
            <c:if test="${not empty isHaveProjects}">
                无预约项目
            </c:if>
            <div class="btn">
                <input type="button" id="goBack" class="reg" value="返回" onclick="goBackSecond()">
            </div>

        </div>
    </div>
</div>
</body>
</html>
